<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>个人中心主界面</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro-red/easyui.css">
<style type="text/css">
		.content-two ul li{
				list-style:none;
				float:left;
				width:170px;
				height:170px;
				margin-left:20px;
				background-color:white;
		}
		.content-two ul li:hover{
				background-color:#19AA8D;
				color:white;
		}
		.photo{
			   width:90px;
			   height:100px;
			   margin:auto;
			   border:solid 1px black;
			   margin-top:20px;
			   cursor: pointer;
		}
		.charater{
				margin:0 55px;
				line-height:50px;
				font-size:15px;
				font-weight:bold;
		}
		.charaters{
				margin:0 47px;
				line-height:50px;
				font-size:15px;
				font-weight:bold;
		}
		.choose ul li{
				text-align:center;
				font-size:15px;
				list-style:none;
				width:130px;
				height:25px;
				color:#999999;
				background-color:white;
				margin-left:20px;
				float:left;    
				line-height:30px;
		}
		.choose ul li:hover{
				background-color:#19AA8D;
				color:white;
				cursor: pointer;
		}
.application{
	width:1000px;
	height:160px;
	background:white;
	margin:10px auto;
}
.application-left{
	height: 100%;
    width: 12%;
    float: left;
    
}
.application-right{
	width: 86%;
	height:100%;
    float: left;
    padding-right:20px;
}
.application-icon{
	width:80px;
	height:80px;
	background-repeat: no-repeat;
    background-size: 50px;
    display:block;
    margin: 20px auto;
    border-radius: 50%;
    border: 3px solid #e4e4e4;
}
.application-right-top{
	height:30%;
	border-bottom: 1px solid #E6E6FA;
	padding-top:20px;
}
.application-right-bottom{
	height:56%
}
.pull-left{
	float:left;
}
.pull-right{
	float:right;
}
.application-right-bottom-left{
	float:left;
	width:30%;
	height:100%;
}
.application-right-bottom-right{
	float:right;
	width:70%;
	height:100%;
}
.info-item{
	height: 25px;
    line-height: 25px;
    font-weight: 400;
    font-size: 14px;
    color: #666;
    text-align: left;
}
</style>
</head>
<body>
<script type="text/javascript">
		
</script>
    <div class="easyui-layout" data-options="fit:true">
		 <div data-options="region:'center'" style="background:#F3F3F3;">
		 	<div class="content-one" style="height:220px;" data-options="collapsible:false">
		 		<div class="portrait" style="width:100px;height:100px;border:solid 1px black;margin:auto;cursor: pointer;">此处为头像</div>
		 		<div style="width:600px;height:30px;margin:auto;font-size:18px;color:black;text-align:center;margin-top:15px;font-weight:boler;">安初</div>
		 		<div style="width:600px;height:20px;margin:auto;font-size:14px;color:black;text-align:center;margin-top:5px;">15364213355</div>
		 		<div style="width:600px;height:20px;margin:auto;font-size:14px;color:black;text-align:center;margin-top:15px;">decade公司</div>
		 	</div>
		 	<div class="content-two" style="height:190px;color:#19AA8D;margin:auto;" data-options="collapsible:false">
		 		<ul>
		 			<li><div class="photo"></div><span class="charater">申请中心</span></li>
		 			<li><div class="photo"></div><span class="charater">审批中心</span></li>
		 			<li><div class="photo"></div><span class="charater">个人中心</span></li>
		 			<li><div class="photo"></div><span class="charater">考勤假期</span></li>
		 			<li><div class="photo"></div><span class="charaters">公司通讯录</span></li>
		 		</ul>
		 	</div> 
		 	<div class="content-three" style="height:500px;" data-options="collapsible:false">
		 			<div class="choose" style="height:30px;border-bottom:#19AA8D 1px solid;">
		 				<ul>
		 					<li>待审批事项</li>
		 					<li>我的申请</li>
		 					<li>发起申请</li>
		 				</ul>
		 			</div>
		 			
		 			<!-- 下列代码为点击我的申请出现的界面 -->	
		 			 <div class="application">
		<div class="application-left">
		<img class="application-icon  icon-head">
		</div>
		<div class="application-right">
			<div class="application-right-top">
				<div class="pull-left">
					<span style="font-weight: 400;font-size: 18px;color: #666;">外出申请</span>
					<span style="font-weight: 400;font-size: 13px;color: #999;margin-left: 5px;">xxxx年x月x日      xx时xx分xx秒</span>
				</div>
				<div class="pull-right">
					<button style="width: 77px; height: 22px;border-radius: 2px; font-weight: 400;font-size: 13px;color: #fff;padding-top: 3px;line-height:2px;background-color:#F9B46A;">提醒</button>
				</div>
			</div>
			<div class="application-right-bottom">
				<div class="application-right-bottom-left">
					<div class="info-item">姓名：xxx</div>
					<div class="info-item">职位：xxx</div>
					<div class="info-item">理由：zzz</div>
				</div>
				<div class="application-right-bottom-right">
					<div class="info-item">类型：aaa</div>
					<div class="info-item">时间：xxxx年x月xx日xx时xx分xx秒至xxxx年x月xx日xx时xx分xx秒 共几天多少小时</div>
				</div>
			</div>
		</div>
	</div>
	 </div>
	</div>
  </div>
</body>
</html>